<template>
	<view class="auto-page" style="background-color: #FFFFFF;">
		<view style="border-top: 2rpx solid #E8E8E8;" v-if="data">
			<view class="item-text nav-icon" style="padding-left: 30rpx;" @click="checkAllPic">全部产品</view>
			<picselector :list="data" :info="info"></picselector>
			<view v-if="info.picType == 'check_image'"></view>
		</view>
		<view class="upload-icon click-opacity" @click="createNewArray"></view>
		<view class="form-msg-fill" v-if="createNewArrayFlag" @click="cancelCreateNewArray">
			<view class="form-msg-fill-box common-shadow" style="position: relative;" @click.stop>
				<view class="title">添加配置</view>
				<view class="item f-row" v-for="(item, index) in formData" :key="index">
					<view class="item-title">{{item.title}}</view>
					<view class="item-select f-1" v-if="index == 0" @click="changeSelecting">
						<view class="text" :style="selectValue ? 'color: #333333' : 'color:#999999'">{{selectValue.label ||'请选择'}}</view>
						<view :class="selecting ? 'sanjiao' : 'sanjiaoOri'"></view>
					</view>
					<view class="item-input f-1" v-if="index == 1 || index == 2">
						<input style="display: inline-block;flex: 1;" type="text" :placeholder="item.props.placeholder" 
						placeholder-style="color:#999999" :value="index == 1 ? categoryName : Catalogue" @input="nameInput($event,index)">
					</view>
					<view class="f-row" style="border: 2rpx solid #e8e8e8;height: 60rpx;box-sizing: border-box;border-radius: 10rpx;" v-if="index == 3">
						<view class="reduce-icon click-opacity" @click="sortNumAddReduce(false)">
							<image mode="aspectFit" src="../../static/icons/reduce.png"></image>
						</view>
						<view class="sort-number">
							{{sortNumber}}
						</view>
						<view class="add-icon click-opacity" @click="sortNumAddReduce(true)">
							<image mode="aspectFit" src="../../static/icons/add.png"></image>
						</view>
					</view>
				</view>
				<view class="confirm-button click-opacity" @click="confirmNewArray">确定</view>
			</view>
		</view>
		<view class="selectarea-container" :style="selecting ? 'bottom:0' : 'bottom: -100vh' " v-if="formData"
		 @touchmove.stop.prevent>
			<view class="f-1" style="width: 100%;background-color: rgba(0, 0, 0, .7);" @click.stop="cancelSelecting"></view>
			<view class="selectarea">
				<scroll-view scroll-y="true" scroll-x="false" class="category-item">
					<view :class="selectArrIndex[0] == index ? 'category-child-item-ed' : 'category-child-item'" v-for="(item, index) in formData[0].props.options"
					 :key="index" @click.stop="selectItemClick(index, 0, item)">
						{{item.label}}
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" scroll-x="false" class="category-item" v-if="selectArrIndex[0] !== -1 && formData[0].props.options[selectArrIndex[0]].children">
					<view :class="selectArrIndex[1] == index ? 'category-child-item-ed' : 'category-child-item'" v-for="(item, index) in formData[0].props.options[selectArrIndex[0]].children"
					 :key="index" @click.stop="selectItemClick(index, 1, item)">
						{{item.label}}
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" scroll-x="false" class="category-item" v-if="selectArrIndex[1] !== -1 && formData[0].props.options[selectArrIndex[0]].children[selectArrIndex[1]].children">
					<view class="category-child-item-last" :style="selectArrIndex[2] == index ? 'color:#007AFF' : ''" v-for="(item, index) in formData[0].props.options[selectArrIndex[0]].children[selectArrIndex[1]].children"
					 :key="index" @click.stop="selectItemClick(index, 2, item)">
						{{item.label}}
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import picselector from '../../components/picselector.vue';
	import OTHER from '../../api/other.js'
	import { showToast } from '../../lib/utils.js'
	export default {
		components: { picselector },
		data() {
			return {
				data: false,
				info: {
					number: 0,
					picType: '',
					status: 1
				},
				picData: false,
				formData: false,
				// 以下为新建图片分类使用数据
				createNewArrayFlag: false,
				selectArrIndex: [-1,-1,-1],
				selectValue: false,
				selecting: false,
				categoryName: '',
				Catalogue: 'def',
				sortNumber: 1,
			}
		},
		onLoad(options) {
			_this = this;
			if(options) {
				_this.info = options;
			}
			let STORAGE_DATA = uni.getStorageSync('STORAGE_DATA');
			if(STORAGE_DATA) {
				_this.info = STORAGE_DATA;
				uni.removeStorageSync('STORAGE_DATA');
			}
			OTHER.attachmentCategoryFormatLst().then((res) => {
				_this.data = res;
			}).catch((err) => {
				console.log(err);
			});
			
			OTHER.attachmentCategoryCreateForm().then((res) => {
				console.log(res);
				_this.formData = res.rule;
			}).catch((err) => {
				console.log(err);
			})
		},
		onShow() {
			const image = uni.getStorageSync('STORAGE_DATA');
			if(image) {
				_this.picData = image;
				uni.removeStorageSync('STORAGE_DATA');
			}
		},
		onBackPress() {
			uni.setStorageSync('STORAGE_DATA',_this.picData)
		},
 		methods: {
			checkAllPic() {
				uni.setStorageSync('STORAGE_DATA',this.info)
				uni.navigateTo({
					url: '/pages/pic-list/pic-list?id=0&title=查看图片'
				});
			},
			createNewArray() {
				_this.createNewArrayFlag = _this.createNewArrayFlag ? false : true;
			},
			cancelCreateNewArray() {
				_this.createNewArrayFlag = false;
			},
			changeSelecting() {
				_this.selecting = _this.selecting ? false : true ;
			},
			selectItemClick(index, parentIndex ,item) {
				_this.selectValue = item ;
				_this.selectArrIndex[parentIndex] = index;
				_this.$forceUpdate();
				if(!item.children) {
					_this.cancelSelecting();
				}
			},
			cancelSelecting() {
				_this.selecting = false ;
			},
			sortNumAddReduce(flag) {
				if(flag) {
					_this.sortNumber += 1;
				}else {
					_this.sortNumber -= 1;
				}
			},
			confirmNewArray() {
				if(!_this.selectValue) {
					showToast('未选择上级分类');
					return;
				}
				if(_this.categoryName == '' || _this.categoryName.trim() == ''){
					showToast('未填写分类名称');
					return;
				}
				let data = {
					attachment_category_enname: (_this.Catalogue.trim() == '' || _this.Catalogue == '') ? 'def' : _this.Catalogue ,
					attachment_category_name: _this.categoryName,
					pid: _this.selectValue.value,
					sort: _this.sortNumber
				};
				OTHER.addAttachmentCategory(data).then((res) => {
					console.log(res);
					showToast('添加成功');
					_this.createNewArrayFlag = false;
					OTHER.attachmentCategoryFormatLst().then((res) => {
						_this.data = res;
					}).catch((err) => {
						console.log(err);
					});
				}).catch((err) => {
					console.log(err);
					showToast('添加失败')
				})
			},
			nameInput(e, index) {
				if(index == 1) {
					_this.categoryName = e.detail.value;
				}else if(index == 2) {
					_this.Catalogue = e.detail.value;
				}
			}
		}
	}
</script>

<style>
	.pic-category-item{
		border-bottom: 2rpx solid #ececec;
		padding: 0 30rpx;
	}
	.pic-category-children-item{
		
	}
	.pic-category-item-text{
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	.pic-category-item:active{
		background-color: #e8e8e8;
	}
	.category-icon,.category-icon-rotate{
		padding-left: 60rpx;
		position: relative;
	}
	.category-icon::after,.category-icon-rotate::after{
		content: " ";
		height: 15rpx;
		width: 15rpx;
		border-width: 1px 1px 0 0;
		border-color: #999999;
		border-style: solid;
		transform: rotate(45deg);
		position: absolute;
		margin-top: -10rpx;
		top: 50%;
		left: 30rpx;
	}
	.category-icon-rotate::after{
		animation: rotate .5s linear 1;
		animation-fill-mode: forwards;
	}
	@keyframes rotate{
		from{
			transform: rotate(0deg);
		}
		to{
			transform: rotate(135deg);
		}
	}
	.item-text{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
	}
	.upload-icon{
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100rpx;
		height: 100rpx;
		border-top-left-radius: 100rpx;
		background-color: #007AFF;
		z-index: 99;
	}
	.upload-icon::after{
		content: "";
		height: 50rpx;
		width: 6rpx;
		border-radius: 3rpx;
		position: absolute;
		background-color: #FFFFFF;
		bottom: 15rpx;
		right: 40rpx;
		transform: rotate(90deg);
	}
	.upload-icon::before{
		content: "";
		height: 50rpx;
		width: 6rpx;
		border-radius: 3rpx;
		position: absolute;
		background-color: #FFFFFF;
		bottom: 15rpx;
		right: 40rpx;
	}
	.form-msg-fill{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.form-msg-fill-box{
		background-color: #FFFFFF;
		width: 80vw;
		height: 60vh;
		border-radius: 20rpx;
		padding: 30rpx;
		border: 2rpx solid #e8e8e8;
	}
	.form-msg-fill-box .title{
		font-size: 32rpx;
		font-weight: bold;
	}
	.form-msg-fill-box .item-title{
		font-size: 28rpx;
		line-height: 100rpx;
		margin-right: 15rpx;
		min-width: 150rpx;
	}
	.form-msg-fill-box .item{
		height: 100rpx;
		align-items: center;
	}
	.form-msg-fill-box .item-input{
		border-radius: 10rpx;
		height: 60rpx;
		box-sizing: border-box;
		border: 2rpx solid #e8e8e8;
	}
	.form-msg-fill-box .item-input input{
		height: 56rpx;
		line-height: 56rpx;
		font-size: 26rpx;
		padding: 0 10rpx;
	}
	.form-msg-fill-box .item-select{
		height: 60rpx;
		box-sizing: border-box;
		border: 2rpx solid #e8e8e8;
		border-radius: 10rpx;
		padding: 0 10rpx;
		font-size: 26rpx;
	}
	.form-msg-fill-box .item-select .text{
		line-height: 60rpx;
	}
	.sanjiao{
		top: 45rpx;
	}
	.sanjiaoOri{
		top: 45rpx;
	}
	.add-icon ,.reduce-icon{
		height: 60rpx;
		width: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.add-icon{
		border-left: 2rpx solid #e8e8e8;
	}
	.reduce-icon{
		border-right: 2rpx solid #e8e8e8;
	}
	.add-icon image{
		height: 40rpx;
		width: 40rpx;
	}
	.reduce-icon image {
		height: 40rpx;
		width: 40rpx;
	}
	.sort-number{
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		font-weight: bold;
		padding: 0 30rpx;
	}
	.confirm-button{
		position: absolute;
		bottom: 50rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #53A7FF;
		text-align: center;
		border-radius: 20rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		font-weight: bold;
		width: 400rpx;
		left: 50%;
		margin-left: -200rpx;
	}
</style>
